<template>
  <van-popup v-model:show="show" teleport="#app" style="background: transparent; max-width: none;">
    <div class="popup mainBg overflow-hidden flex-column">
      <van-icon @click="show=false" class="closeIcon" name="cross" color="#FFFFFF"/>
      <div class="title">{{ title || '' }}</div>
      <van-list
          v-model:loading="loading"
          :finished="finished"
          :finished-text="nothing ? '':'~ 我的有底线的 ~'"
          @load="loadList"
          :immediate-check="false"
          class="list scroll"
      >
        <div class="item flex-space-between" v-for="(i,k) in list" :key="k">
          <div class="flex-shrink-0">
            <div class="date">{{ i.date }}</div>
            <!--      <div class="adr">{{ textSubstr(i.adr, 5) }}</div>-->
          </div>
          <div class="line flex1 text-center">
            <div class="name">{{ i.name }}</div>
            <div class="desc">{{ i.desc }}</div>
          </div>
          <div class="numBox flex1">
            <div class="count">{{ i.num }}</div>
            <div class="unit">APPLE-LP</div>
          </div>
          <div v-if="i.state !== 3" :class="{'disable':i.state!==2}" class="submit flex-center" @click="getCapital(i)">
            提本金
          </div>
          <div v-else :class="{'disable':i.state!==2}" class="submit flex-center">已结束</div>


        </div>

        <van-empty v-if="nothing" description="暂无内容" image-size="98"/>
      </van-list>
    </div>
  </van-popup>
</template>

<script setup>
import {computed, ref} from 'vue';
import req from '@/libs/req';
import {showToast} from 'vant';
import {useEthersStore} from '@/stores/ethers';

const ethers = useEthersStore();
const props = defineProps(['title']);
const show = ref(false);
const loading = ref(false);
const finished = ref(false);
const nothing = ref(false);
const pageNum = ref(1);
const list = ref([]);
// 0 质押记录 1 提取奖励记录
const mode = ref(0)

const title = computed(()=> mode.value === 0 ? '质押记录' : mode.value === 1 ? '提取记录' : props.title)
const walletAdr = computed(() => ethers.walletAdr);



async function loadList() {
  try {
    loading.value = true;
    if (pageNum.value === 1) {
      list.value.splice(0, list.value.length);
    }
    let res

    if(mode.value === 0){
      res = await req.post('/api/user/pledge/listPage', {
        pageNum: pageNum.value,
        pageSize: 10,
      });
    }else if(mode.value === 1){
      res = await req.post('/api/account/withdrawal/record', {
        pageNum: pageNum.value,
        pageSize: 10,
        accountType: 2
      });
    }


    if (pageNum.value === 1 && !res.records.length) {
      nothing.value = true;
    } else if (res.records.length < 10) {
      finished.value = true;
    } else {
      pageNum.value += 1;
    }
    list.value.push(...res.records.map(i => ({
      date: i.pledgeDate,
      num: i.quantity,
      name: i.state === 2 ? '待提取' : i.state === 3 ? '已结束' : '进行中',
      desc: i.surplusDays > 0 ? `距离结束${i.surplusDays}天` : '',
      state: i.state,
      id: i.id,
    })));

    loading.value = false;
  } catch (e) {

  }
}

// type 0 质押记录 1 提取奖励记录
function showFun(type) {
  if (!walletAdr.value) {
    return ethers.init();
  }
  mode.value = type;
  pageNum.value = 1;
  finished.value = false;
  nothing.value = false;
  loading.value = false;
  loadList();
  show.value = true;
}

// 提取本金
async function getCapital({id, state}) {
  try {
    if (state !== 2) {
      return showToast('尚未结束');
    }
    await req.post('/api/user/pledge/withdrawal/principal', {
      id,
    }, {loading: ' '});
    showToast('已提交');
    showFun();
  } catch (e) {
    console.log(e);
  }
}

defineExpose({
  show: showFun,
});
</script>

<style scoped lang="scss">
.popup {
  min-width: 345px;
  min-height: 316px;
  max-height: 446px;
  position: relative;
  margin: 0 16px;

  font-size: 14px;
  font-weight: 400;
  color: #000000;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-shadow: 0 2px 0 0 #000000;

  &:before {
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background: #090808;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }


  .title {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding: 21px 0 29px;
  }

  .closeIcon {
    position: absolute;
    top: 14px;
    right: 20px;
    width: 13px;
    height: 14px;
    overflow: hidden;
    font-size: 15px;
  }
}

.item {
  margin: 0 6px 5px;
  padding: 6px 2px 15px;
  border-bottom: 1px solid rgba(53, 53, 53, .2);

  .date {
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 6px;
    width: 70px;
    text-align: center;
  }

  .name {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 6px;
  }

  .line {
    width: 98px;
  }

  .adr, .desc {
    font-size: 12px;
    font-weight: 400;
    opacity: .8;
  }

  .numBox {
    margin: 0 12px;
    text-align: center;
  }

  .count {
    font-size: 14px;
    font-weight: 400;
    word-break: break-word;
  }

  .unit {
    font-size: 12px;
    margin-top: 6px;
  }

  .submit {
    border: 1px solid #000000;
    background: rgba(35, 172, 116, 1);
    border-radius: 21px;
    padding: 0 17px;
    height: 28px;
    margin: 12px 0;
    font-size: 12px;
    letter-spacing: 1px;
    color: #FFFFFF;

    &:active {
      filter: brightness(.8);
    }

    &.disable {
      filter: brightness(.4);
    }
  }
}
</style>
